<template>
  <div class="recruitment-container">
    <div class="page-header">
      <router-link class="back-link" to="/main/biao">
        <i class="el-icon-arrow-left"></i>
        返回
      </router-link>
      <h1>招聘流程管理</h1>
    </div>

    <div class="content-wrapper">
      <div class="section-header">
        <div class="section-title">
          <i class="el-icon-document"></i>
          <span>招聘流程修订文件</span>
        </div>
        <div class="section-desc">文件管理与流程控制</div>
      </div>

      <div class="document-grid">
        <div class="document-column">
          <router-link class="document-item" to="/main/biao/wenjianzl">
            <i class="el-icon-document-copy"></i>
            <div class="item-content">
              <span class="item-title">文件管制总览表</span>
              <span class="item-code">0001</span>
            </div>
          </router-link>

          <router-link class="document-item" to="/main/biao/biaodanzl">
            <i class="el-icon-tickets"></i>
            <div class="item-content">
              <span class="item-title">表单管制总览表</span>
              <span class="item-code">0002</span>
            </div>
          </router-link>

          <router-link class="document-item" to="/main/biao/wailai">
            <i class="el-icon-document-add"></i>
            <div class="item-content">
              <span class="item-title">外来文件登记表</span>
              <span class="item-code">0003</span>
            </div>
          </router-link>

          <router-link class="document-item" to="/main/biao/huishen">
            <i class="el-icon-document-checked"></i>
            <div class="item-content">
              <span class="item-title">文件会审表</span>
              <span class="item-code">0004</span>
            </div>
          </router-link>

          <router-link class="document-item" to="/main/biao/wjbufa">
            <i class="el-icon-document-add"></i>
            <div class="item-content">
              <span class="item-title">文件补发申请单</span>
              <span class="item-code">0005</span>
            </div>
          </router-link>
        </div>

        <div class="document-column">
          <router-link class="document-item" to="/main/biao/ffhuishou">
            <i class="el-icon-document-delete"></i>
            <div class="item-content">
              <span class="item-title">文件发放与回收记录</span>
              <span class="item-code">0006</span>
            </div>
          </router-link>

          <router-link class="document-item" to="/main/biao/ffhuishous">
            <i class="el-icon-document-remove"></i>
            <div class="item-content">
              <span class="item-title">文件发放与回收记录</span>
              <span class="item-code">0007</span>
            </div>
          </router-link>

          <router-link class="document-item" to="/main/biao/xdfeizhi">
            <i class="el-icon-document-delete"></i>
            <div class="item-content">
              <span class="item-title">文件修订/废止申请单</span>
              <span class="item-code">0008</span>
            </div>
          </router-link>

          <router-link class="document-item" to="/main/biao/xiaohui">
            <i class="el-icon-delete"></i>
            <div class="item-content">
              <span class="item-title">文件销毁申请单</span>
              <span class="item-code">0009</span>
            </div>
          </router-link>

          <router-link class="document-item" to="/main/biao/jieyue">
            <i class="el-icon-document"></i>
            <div class="item-content">
              <span class="item-title">文件借阅登记表</span>
              <span class="item-code">0010</span>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.recruitment-container {
  min-height: 100vh;
  // background-color: #f5f7fa;
  padding: 20px;
  box-sizing: border-box;
  width: 1200px;
  margin: 0 auto;

  .page-header {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    background-color: #fff;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);

    .back-link {
      display: flex;
      align-items: center;
      text-decoration: none;
      color: #409EFF;
      font-size: 14px;
      margin-right: 20px;
      transition: all 0.3s;

      i {
        margin-right: 5px;
      }

      &:hover {
        opacity: 0.8;
      }
    }

    h1 {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: #303133;
    }
  }

  .content-wrapper {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
    padding: 32px;

    .section-header {
      text-align: center;
      margin-bottom: 40px;

      .section-title {
        display: inline-flex;
        align-items: center;
        background: linear-gradient(135deg, #409EFF, #66b1ff);
        color: white;
        padding: 12px 24px;
        border-radius: 10px;
        margin-bottom: 16px;
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);

        i {
          margin-right: 8px;
          font-size: 20px;
        }

        span {
          font-size: 18px;
          font-weight: 500;
        }
      }

      .section-desc {
        color: #909399;
        font-size: 14px;
      }
    }

    .document-grid {
      display: flex;
      gap: 32px;
      justify-content: center;
      padding: 0 20px;

      .document-column {
        flex: 1;
        max-width: 400px;
        display: flex;
        flex-direction: column;
        gap: 16px;

        .document-item {
          display: flex;
          align-items: center;
          text-decoration: none;
          background-color: #f5f7fa;
          border: 1px solid #ebeef5;
          border-radius: 8px;
          padding: 16px;
          transition: all 0.3s ease;

          i {
            font-size: 24px;
            color: #409EFF;
            margin-right: 16px;
            transition: all 0.3s ease;
          }

          .item-content {
            flex: 1;
            display: flex;
            flex-direction: column;

            .item-title {
              font-size: 14px;
              font-weight: 500;
              color: #303133;
              margin-bottom: 4px;
            }

            .item-code {
              font-size: 12px;
              color: #909399;
            }
          }

          &:hover {
            transform: translateX(5px);
            background-color: #ecf5ff;
            border-color: #409EFF;
            box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);

            i {
              transform: scale(1.2);
            }

            .item-content {
              .item-title {
                color: #409EFF;
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .recruitment-container {
    padding: 12px;

    .page-header {
      padding: 12px 16px;
    }

    .content-wrapper {
      padding: 20px 16px;

      .section-header {
        margin-bottom: 24px;

        .section-title {
          padding: 8px 16px;
          
          i {
            font-size: 18px;
          }

          span {
            font-size: 16px;
          }
        }
      }

      .document-grid {
        flex-direction: column;
        gap: 16px;
        padding: 0;

        .document-column {
          max-width: none;
          gap: 12px;

          .document-item {
            padding: 12px;

            i {
              font-size: 20px;
              margin-right: 12px;
            }

            .item-content {
              .item-title {
                font-size: 13px;
              }

              .item-code {
                font-size: 11px;
              }
            }
          }
        }
      }
    }
  }
}
</style>